import EchartsComponent, { MyChartOption } from '@/components/EchartsComponent';
import { Space } from 'antd';
import React from 'react';
import Styles from './BatteryBarChart.less';

type PieChartOptions = {
  options: MyChartOption;
  pieInfo: API.PieData;
};
type IProps = {
  pieChartOptions: PieChartOptions;
};
const socMap = new Map<string, string>([
  ['a', '90% <SOH ≤100%'],
  ['b', '80% <SOH ≤90%'],
  ['c', '70% <SOH ≤80%'],
  ['d', '60% <SOH ≤70%'],
  ['e', 'SOH ≤60%'],
]);
const BatteryBarChart: React.FC<IProps> = (props) => {
  const { pieChartOptions } = props;
  const getHighestPoint = (pieData: API.PieData) => {
    const aimObj = {
      a: pieData?.a,
      b: pieData?.b,
      c: pieData?.c,
      d: pieData?.d,
      e: pieData?.e,
    };
    let maxKey: string = '';
    let maxValue = -Infinity;
    for (const [key, value] of Object.entries(aimObj)) {
      if (value > maxValue) {
        maxValue = value;
        maxKey = key;
      }
    }
    return socMap.get(maxKey);
  };
  return (
    <>
      <EchartsComponent option={pieChartOptions?.options} height={350} />
      <div className={Styles.tooltip}>
        <ul>
          <li className={Styles.maxPoint}>
            {getHighestPoint(pieChartOptions?.pieInfo)}&nbsp;占比最高
          </li>
          <li>
            <Space>
              <div className={Styles.aBox}></div>
              <div className={Styles.barChartText}>{socMap.get('a')}</div>
              <div>{pieChartOptions?.pieInfo?.a}堆</div>
              <div>
                {Math.round((pieChartOptions?.pieInfo?.a / pieChartOptions?.pieInfo?.total) * 100)}%
              </div>
            </Space>
          </li>
          <li>
            <Space>
              <div className={Styles.bBox}></div>
              <div className={Styles.barChartText}>{socMap.get('b')}</div>
              <div>{pieChartOptions?.pieInfo?.b}堆</div>
              <div>
                {Math.round((pieChartOptions?.pieInfo?.b / pieChartOptions?.pieInfo?.total) * 100)}%
              </div>
            </Space>
          </li>
          <li>
            <Space>
              <div className={Styles.cBox}></div>
              <div className={Styles.barChartText}>{socMap.get('c')}</div>
              <div>{pieChartOptions?.pieInfo?.c}堆</div>
              <div>
                {Math.round((pieChartOptions?.pieInfo?.c / pieChartOptions?.pieInfo?.total) * 100)}%
              </div>
            </Space>
          </li>
          <li>
            <Space>
              <div className={Styles.dBox}></div>
              <div className={Styles.barChartText}>{socMap.get('d')}</div>
              <div>{pieChartOptions?.pieInfo?.d}堆</div>
              <div>
                {Math.round((pieChartOptions?.pieInfo?.d / pieChartOptions?.pieInfo?.total) * 100)}%
              </div>
            </Space>
          </li>
          <li>
            <Space>
              <div className={Styles.eBox}></div>
              <div className={Styles.barChartText}>{socMap.get('e')}</div>
              <div>{pieChartOptions?.pieInfo?.e || 0}堆</div>
              <div>
                {Math.round(
                  ((pieChartOptions?.pieInfo?.e || 0) / pieChartOptions?.pieInfo?.total) * 100,
                )}
                %
              </div>
            </Space>
          </li>
        </ul>
      </div>
    </>
  );
};

export default BatteryBarChart;
